
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tocify by Greg Franko</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="styles/bootstrap.css" rel="stylesheet">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
    <link href="../src/stylesheets/jquery.tocify.css" rel="stylesheet">
    <link href="styles/prettify.css" type="text/css" rel="stylesheet" />

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
    <style>
    body {
      padding-top: 20px;
    }
    p {
      font-size: 16px;
    }
    .headerDoc {
      color: #005580;
    }

@media (max-width: 767px) {
    #toc {
        position: relative;
        width: 100%;
        margin: 0px 0px 20px 0px;
    }
}
    </style>
  </head>

  <body>

<a href="https://github.com/gfranko/jquery.tocify.js" target="_blank" id="fork-me"><img style="position: fixed;top: 0; right: 0; border: 0;z-index:999999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" alt="Fork me on GitHub"></a>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div id="toc">
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <h1>Tocify</h1>
            
            <br />
            <h2>Description</h2>
            <div class="github-widget" data-repo="gfranko/jquery.tocify.js"></div>
            <br />
            <p>The project is hosted on <a href="https://github.com/gfranko/jquery.tocify.js" target="_blank" class="projectLinks">Github</a>, and the <a href="http://gregfranko.com/jquery.tocify.js/docs/jquery.tocify.html" target="_blank" class="projectLinks">annotated source code</a> is available.  Tocify is available for use under the <a href="https://github.com/gfranko/jquery.tocify.js/blob/master/MIT-LICENSE.txt" target="_blank" class="projectLinks">MIT software license</a>.  You can report bugs and discuss features on the <a href="https://github.com/gfranko/jquery.tocify.js/issues?sort=created&direction=desc&state=open" target="_blank">GitHub issues page</a>, or send tweets to <a href="http://www.twitter.com/gregfranko" target="_blank">@gregfranko</a>.
            </p>
            <p><a class="btn btn-primary btn-large" href="https://github.com/gfranko/jquery.tocify.js" target="_blank">Fork on Github &raquo;</a></p>
          </div>

              <h2>Requirements</h2>
              <br />
              <p class="well"><a href="http://jquery.com" target="_blank">jQuery 1.7.2+</a> (It is always recommended to use the latest version of jQuery)
                <br /><br />
                <a href="http://jqueryui.com/download" target="_blank">jQueryUI Widget Factory 1.8.21+</a> (It is always recommended to use the latest version of the jQueryUI Widget Factory)
              </p>
              <br />
              <h2>Optional Dependencies</h2>
              <br />
              <p class="well">
              <a href="http://twitter.github.com/bootstrap/customize.html" target="_blank">Twitter Bootstrap</a> or <a href="http://jqueryui.com/download" target="_blank">jQueryUI CSS Theme</a>
              <br /><br />
              <span class="note"><strong>Note: </strong>A Twitter Bootstrap or jQueryUI theme is only required if you want to use either framework to style your table of contents.
              </span>
              </p>
              <br />

              <h2>Notable Features</h2>
              <br />
             <p class="well">
             Supports <span class="headerDoc">forward and back button</span> support
             <br /><br />
             Supports styling with <span class="headerDoc">Twitter Bootstrap</span> or <span class="headerDoc">jQueryUI Themeroller</span>
             <br /><br />
             Supports show/hide animations with <span class="headerDoc">jQuery effects</span>
             <br /><br />
             Supports <span class="headerDoc">smooth scrolling animations</span>
             <br /><br />
             Supports <span class="headerDoc">dynamic scroll highlighting</span>
             <br /><br />
             Supports <span class="headerDoc">dynamic scroll show/hide effects</span>
             <br /><br />
             Supports <span class="headerDoc">page extender</span> option to make sure a page is big enough to scroll to all table of content items
              <br /><br />

              <h2>Browser Support</h2>
              <br />
              <p class="well">Tested in <span class="headerDoc">IE7+, Firefox 4+, Chrome, Safari 4+, and Opera 11+</span></p>
              <br />

              <h2>Getting Started</h2>
              <br />
              <h3>Downloads</h3>
              <br />
              <p>
              Download the latest versions of...
              </p>
              <br />
              <ol class="well">
                <li><a href="http://www.jquery.com" target="_blank">jQuery</a></li>
                <br />
                <li><a href="http://jqueryui.com/download" target="_blank">jQueryUI Widget Factory</a> (You only need the Widget component underneath the UI Core dependency)</li>
                <br />
                <li><a href="https://github.com/gfranko/jquery.tocify.js/zipball/master">Tocify</a> (You only need jquery.tocify.js and jquery.tocify.css)</li>
                <br />
                <li><a href="http://twitter.github.com/bootstrap/customize.html" target="_blank">Twitter Bootstrap</a> or <a href="http://jqueryui.com/download" target="_blank">jQueryUI CSS Theme</a> (Only required if you want to use either framework to style your table of contents)</li>
              </ol>
              <br />

              <p>
              <h3>Include CSS and JavaScript files</h3>
              </p>
              <br />
              <span class="note"><strong>CSS</strong></span>
              <pre class="prettyprint">
                &lt;link type="text/css" rel="stylesheet" href="jquery.tocify.css" /&gt;
                &lt;link type="text/css" rel="stylesheet" href="bootstrap.css" /&gt;
              </pre>
              <br />
              <span class="note"><strong>JavaScript</strong></span>

              <pre class="prettyprint">
                &lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
                &lt;script src="jquery-ui-1.9.1.custom.min.js"&gt;&lt;/script&gt;
                &lt;script src="jquery.tocify.min.js""&gt;&lt;/script&gt;
              </pre>
              <span class="note"><strong>Note:</strong> This assumes that you have downloaded the CSS and JavaScript files to the same folder as your HTML page. Modify the <strong>href</strong> and <strong>src</strong> attributes if you have a different folder structure.
              <br /><br />
              Also, if you are using jQueryUI to style your table of contents list, then add all of the jQueryUI images to your <strong>images</strong> folder. Keep in mind that depending on your folder structure, you may need to update the image paths inside of the jQueryUI CSS file.
              </span>
              <br /><br />
              <p>
              <h3>HTML</h3>
              </p>
              <span class="note">
              Create a <strong>div</strong> element with a unique id or class (eg. "toc") 
              </span>
              <br /><br />
              <pre class="prettyprint">
                &lt;div id="toc"&gt;&lt;/div&gt;
              </pre>
              <br />
              <h3>CSS</h3>
              </p>
              <p class="well">
              <span class="note">
                <strong>Note:</strong> Modify the Tocify CSS file to fit your custom needs
              </span>
              </p>
              <br />
              <p>
              <h3>JavaScript</h3>
              </p>
              <p class="well">
              <span class="note">
                <strong>Call the plugin: </strong> In your JavaScript code, call the <strong>tocify()</strong> method on your HTML div.
              </span>
              </p>

              <pre class="prettyprint">
              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  //Calls the tocify method on your HTML div.
                  $("#toc").tocify();
              });
              </pre>

              <h2>Options API</h2>
              <br />
              <h3>Options</h3>
              <table class="table table-striped table-bordered table-condensed">
                <tr>
                  <th>Name</th>
                  <th>Type</th>
                  <th>Default</th>
                  <th>Options</th>
                </tr>
                <tr>
                  <td class="optionName" title="context" data-content="The container element that holds all of the elements used to generate the table of contents"><a href="#">context</a></td>
                  <td>String</td>
                  <td>"body"</td>
                  <td>Any valid jQuery selector</td>
                </tr>
                <tr>
                  <td class="optionName" title="ignoreSelector" data-content="A selector to any element that would be matched by selectors that you wish to be ignored"><a href="#">ignoreSelector</a></td>
                  <td>String</td>
                  <td>null</td>
                  <td>Any valid jQuery selector</td>
                </tr>
                <tr>
                  <td class="optionName" title="selectors" data-content="The element's used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure."><a href="#">selectors</a></td>
                  <td>String</td>
                  <td>"h1,h2,h3"</td>
                  <td>Each comma separated selector must be a header element.</td>
                </tr>
                <tr>
                  <td class="optionName" title="showAndHide" data-content="Used to determine if elements should be shown and hidden.  Turn this to false and remove the display:none CSS property for subheader elements (in jquery.tocify.css) to have a non-animated/fully visible table of contents."><a href="#">showAndHide</a></td>
                  <td>Boolean</td>
                  <td>true</td>
                  <td>true or false</td>
                </tr>
                <tr>
                  <td class="optionName" title="showEffect" data-content="Used to display any of the table of contents nested items."><a href="#">showEffect</a></td>
                  <td>String</td>
                  <td>"slideDown"</td>
                  <td>"none", "fadeIn", "show", or "slideDown", or any of the other jQuery show effects</td>
                </tr>
                <tr>
                  <td class="optionName" title="showEffectSpeed" data-content="The time duration of the show effect."><a href="#">showEffectSpeed</a></td>
                  <td>String or Number</td>
                  <td>"medium"</td>
                  <td>"slow", "medium", "fast", or any numeric number (milliseconds)</td>
                </tr>
                <tr>
                  <td class="optionName" title="hideEffect" data-content="Used to hide any of the table of contents nested items."><a href="#">hideEffect<a/></td>
                  <td>String</td>
                  <td>"none"</td>
                  <td>"none", "fadeOut", "hide", "slideUp", or any of the jQuery hide effects</td>
                </tr>
                <tr>
                  <td class="optionName" title="hideEffectSpeed" data-content="The time duration of the hide effect."><a href="#">hideEffectSpeed</a></td>
                  <td>String or Number</td>
                  <td>"medium"</td>
                  <td>"slow", "medium", "fast", or any numeric number (milliseconds)</td>
                </tr>
                <tr>
                  <td class="optionName" title="smoothScroll" data-content="Animates the page scroll when specific table of content items are clicked and the page moves up or down."><a href="#">smoothScroll</a></td>
                  <td>Boolean</td>
                  <td>true</td>
                  <td>true or false</td>
                </tr>
                <tr>
                  <td class="optionName" title="smoothScrollSpeed" data-content="The time duration of the smoothScroll animation."><a href="#">smoothScrollSpeed</a></td>
                  <td>Number or String</td>
                  <td>"medium"</td>
                  <td>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</td>
                </tr>
                <tr>
                  <td class="optionName" title="scrollTo" data-content="The amount of space between the top of page and the selected table of contents item after the page has been scrolled."><a href="#">scrollTo</a></td>
                  <td>Number</td>
                  <td>0</td>
                  <td>Accepts any number (pixels)</td>
                </tr>
                <tr>
                  <td class="optionName" title="showAndHideOnScroll" data-content="Determines if table of content nested items should be shown and hidden while a user scrolls the page."><a href="#">showAndHideOnScroll</a></td>
                  <td>Boolean</td>
                  <td>true</td>
                  <td>true or false</td>
                </tr>
                <tr>
                  <td class="optionName" title="highlightOnScroll" data-content="Determines if table of content nested items should be highlighted (set to a different background color to show it is the currently active item) while scrolling"><a href="#">highlightOnScroll</a></td>
                  <td>Boolean</td>
                  <td>true</td>
                  <td>true or false</td>
                </tr>
                <tr>
                  <td class="optionName" title="highlightOffset" data-content="The offset distance in pixels to trigger the next active table of contents item"><a href="#">highlightOffset</a></td>
                  <td>Number</td>
                  <td>40</td>
                  <td>Accepts any number (pixels)</td>
                </tr>
                <tr>
                  <td class="optionName" title="theme" data-content="Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contents"><a href="#">theme</a></td>
                  <td>String</td>
                  <td>"twitterBootstrap"</td>
                  <td>"twitterBootstrap", "jqueryUI", or "none"</td>
                </tr>
                <tr>
                  <td class="optionName" title="extendPage" data-content="If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased"><a href="#">extendPage</a></td>
                  <td>Boolean</td>
                  <td>true</td>
                  <td>true or false</td>
                </tr>
                <tr>
                  <td class="optionName" title="extendPageOffset" data-content="How close to the bottom of the page a user must scroll before the page is extended"><a href="#">extendPageOffset</a></td>
                  <td>Number</td>
                  <td>100</td>
                  <td>Any number (pixels)</td>
                </tr>
                <tr>
                  <td class="optionName" title="history" data-content="Adds a hash to the page url to maintain history"><a href="#">history</a></td>
                  <td>Boolean</td>
                  <td>true</td>
                  <td>true or false</td>
                </tr>
                <tr>
                  <td class="optionName" title="hashGenerator" data-content="How the URL hash value get's generated."><a href="#">hashGenerator</a></td>
                  <td>String or Function</td>
                  <td>"compact"</td>
                  <td>"compact", "pretty", function(text, element){}.
                    <br />
                    <strong>Compact</strong> - #CompressesEverythingTogether.
                    <br />
                    <strong>Pretty</strong> - #looks-like-a-nice-url-and-is-easily-readable.
                    <br />
                    <strong>function(text, element){}</strong> - Your own hash generation function that accepts the text as an argument, and returns the hash value.</td>
                </tr>
                <tr>
                  <td class="optionName" title="highlightDefault" data-content="Set's the first TOC item as active if no other TOC item is active."><a href="#">highlightDefault</a></td>
                  <td>Boolean</td>
                  <td>true</td>
                  <td>true or false</td>
                </tr>
                <tr>
                  <td class="optionName" title="scrollHistory" data-content="Adds a hash to the page url, to maintain history, when scrolling to a TOC item."><a href="#">scrollHistory</a></td>
                  <td>Boolean</td>
                  <td>false</td>
                  <td>true or false</td>
                </tr>
              </table>
              <br />
              <h3>Setting Options</h3>
<p class="well">
              All options can be <strong>set</strong> when the plugin is called.  Certain options can also be set after the plugin is called using the <strong>setOption()</strong> or <strong>setOptions()</strong> methods.</p>

              <span class="note">Here is an example of setting a <strong>single option</strong> when the plugin is first invoked:</span>
              <pre class="prettyprint">
              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  // Calls the selectBoxIt method on your HTML select box and updates the showEffect option
                  var toc = $("#toc").tocify({ showEffect: "fadeIn" });
              });
              </pre>
              <br />

              <span class="note">Here is an example of setting a <strong>single option</strong> after the plugin is first invoked using the <strong>setOption</strong> method:</span>
              <pre class="prettyprint">
              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  // Calls the selectBoxIt method on your HTML select box
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Sets the smoothScroll option to false
                  toc.setOption("showEffect", "fadeIn");

              });
              </pre>
              <br />

              <span class="note">Here is an example of setting a <strong>multiple options</strong> after the plugin is first invoked using the <strong>setOptions</strong> method:</span>
              <pre class="prettyprint">
              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  // Calls the selectBoxIt method on your HTML select box and updates the showEffect option
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Sets the showEffect, scrollTo, and smoothScroll options
                  toc.setOptions({ showEffect: "fadeIn", scrollTo: 50, smoothScroll: false });

              });
              </pre>
              <br />
              
              <h3>Getting Options</h3>
              <p class="well">
              A single option can be <strong>retrieved</strong> by using the <strong>option()</strong> method.  All of the current options can be retrieved by referencing the <strong>options</strong> property.
              </p>
              <br />
              <span class="note">Here is an example of retrieving a <strong>single option</strong> after the plugin is called using the <strong>option()</strong> method:</span>
              <pre class="prettyprint">
              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  //Calls the tocify method on your HTML div
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Writes the showEffect option to the console
                  console.log(toc.option("showEffect"));
              });
              </pre>
              <br />
              <span class="note">Here is an example of retrieving <strong>all current options</strong> after the plugin is called using the <strong>options</strong> property:</span>
              <pre class="prettyprint">
              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  //Calls the selectBoxIt method on your HTML select box
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Writes all of the current plugin options to the console
                  console.log(toc.options);
              });
              </pre>
              
              <h2>Inspired By</h2>
              <br />
              <h3 class="headerDoc well"><a href="http://www.canjs.us/" target="_blank">Can.js</a></h3>
              <br /><br />
              <h3 class="headerDoc well"><a href="http://bonsaiden.github.com/JavaScript-Garden/" target="_blank">JavaScript Garden</a></h3>

              <br />
             <h2>Donation</h2>
              <p class="well">
              If you would like to support the Tocify project, please consider sending a donation to Greg Franko (the project maintainer).  All donations (small or large) are appreciated and help the continued development of the project. &nbsp;
              <iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/gfranko/widget.html" width="48pt" height="20pt"></iframe>
              </p>

              <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
              <input type="hidden" name="cmd" value="_s-xclick">
              <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
              <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
              <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
              </form>

        </div><!--/span-->
      </div><!--/row-->

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../libs/jquery/jquery-1.8.3.min.js"></script>
    <script src="../libs/jqueryui/jquery-ui-1.9.1.custom.min.js"></script>
    <script src="javascripts/bootstrap.js"></script>
    <script src="../src/javascripts/jquery.tocify.js"></script>
    <script src="javascripts/prettify.js"></script>
    <script>
        $(function() {

            var toc = $("#toc").tocify({
              selectors: "h2,h3,h4,h5"
            }).data("toc-tocify");

            prettyPrint();
            $(".optionName").popover({ trigger: "hover" });

        });
    </script>

  </body>
</html>
